<!-- eslint-disable vue/valid-v-model -->
<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="外观" name="props">
        <el-form label-width="90px" label-position="left">
          <el-collapse v-model="activeCollapse">
            <el-collapse-item name="link" title="链接"
              v-if="(isImage || isVideo || isIfram) && store.currentPenLength == 1">
              <div class="collapse-content">
                <el-form-item label="链接地址">
                  <el-input v-show="isImage" v-model="store.currentPen['image']" @input="handleChangePen('image')"
                    placeholder="链接地址">
                  </el-input>
                  <el-input v-show="isVideo" v-model="store.currentPen['video']" @input="handleChangePen('video')"
                    placeholder="链接地址">
                  </el-input>
                  <el-input v-show="isIfram" v-model="store.currentPen['iframe']" @input="handleChangePen('iframe')"
                    placeholder="链接地址">
                  </el-input>
                </el-form-item>
              </div>
            </el-collapse-item>
            <!--            图元位置 大小-->
            <el-collapse-item v-show="!isLine" name="position&size" title="位置和大小" v-if='store.currentPenLength == 1'>
              <div class="collapse-content">
                <el-form-item v-for="meta in xyhwFormMeta" :key="meta.key" :label="meta.label">
                  <el-input-number controls-position="right" v-if="meta.type === 'input-number'"
                    v-model="(store.currentPenRect[meta.key as keyof Rect] as number)"
                    @input="handleChangePenRect"></el-input-number>
                </el-form-item>

                <el-form-item v-for="meta in positionFormMeta" :key="meta.key" :label="meta.label">
                  <el-input-number controls-position="right" :max="meta.max" :min="meta.min" :step="meta.step"
                    v-if="meta.type === 'input-number'" v-model="store.currentPen[meta.key] as any"
                    @input="handleChangePen(meta.key)"></el-input-number>
                  <el-color-picker show-alpha :predefine="ColorPredefine" v-if="meta.type === 'color-picker'"
                    v-model="store.currentPen[meta.key] as any" @change="handleChangePen(meta.key)"></el-color-picker>
                  <el-switch v-if="meta.type === 'switch'" v-model="store.currentPen[meta.key] as any"
                    @change="handleChangePen(meta.key)"></el-switch>
                </el-form-item>
                <el-form-item label="状态" v-if="store.currentPen.children && store.currentPen.children.length > 0">
                  <el-select popper-class="editor-container-scss" v-model="store.currentPen['showChild'] as any"
                    @change="handleChangePen('showChild')" placeholder="状态">
                    <el-option v-for="(item, index) in store.currentPen.children" :key="index" :label="`状态${index + 1}`"
                      :value="index">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-collapse-item>
            <!--            线条位置-->
            <el-collapse-item v-show="isLine" name="position" title="位置" v-if='store.currentPenLength == 1'>
              <div class="collapse-content">
                <el-form-item v-show="isLine" label="起点箭头">
                  <el-dropdown v-model="store.currentPen.fromArrow" placement="bottom-start"
                    @command="onChangeLineStart">
                    <editor-button :vertical="false" :iconClass="`t-from-${currentLineFrom}`"></editor-button>

                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-for="(item, index) in LineEndsType" :key="index" :command="item">
                          <i style="font-size: 30px" :class="`t-icon t-from-${item}`"></i>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-form-item>
                <el-form-item v-show="isLine" label="起点箭头大小">
                  <el-input-number controls-position="right" v-model="store.currentPen['fromArrowSize']" :max="100"
                    :min="1" :step="1" @input="handleChangePen('fromArrowSize')"></el-input-number>
                </el-form-item>
                <el-form-item v-show="isLine" label="起点箭头颜色">
                  <el-color-picker show-alpha :predefine="ColorPredefine" v-model="store.currentPen['fromArrowColor']"
                    @change="handleChangePen('fromArrowColor')"></el-color-picker>
                </el-form-item>
                <el-form-item v-show="isLine" label="终点箭头">
                  <el-dropdown v-model="store.currentPen.toArrow" placement="bottom-start" @command="onChangeLineEnd">
                    <editor-button :iconClass="`t-to-${currentLineTo}`"></editor-button>

                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-for="(item, index) in LineEndsType" :key="index" :command="item">
                          <i style="font-size: 30px" :class="`t-icon t-to-${item}`"></i>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-form-item>
                <el-form-item v-show="isLine" label="终点箭头大小">
                  <el-input-number controls-position="right" v-model="store.currentPen['toArrowSize']" :max="100"
                    :min="1" :step="1" @input="handleChangePen('toArrowSize')"></el-input-number>
                </el-form-item>
                <el-form-item v-show="isLine" label="终点箭头颜色">
                  <el-color-picker show-alpha :predefine="ColorPredefine" v-model="store.currentPen['toArrowColor']"
                    @change="handleChangePen('toArrowColor')"></el-color-picker>
                </el-form-item>
              </div>
            </el-collapse-item>
            <el-collapse-item name="style" title="样式">
              <div class="collapse-content">
                <el-form-item v-show="isLine" label="线条类型">
                  <el-dropdown v-model="(store.currentPen as CustomPen).lineType" placement="bottom-start"
                    @command="onChangeLineType" size="large">
                    <editor-button :vertical="false" :iconClass="LineTypeIcon[lineTypeName as keyof typeof LineType]">
                      {{ lineTypeName }}
                    </editor-button>

                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item style="display: flex; justify-content: space-between"
                          v-for="(item, index) in Object.keys(LineType)" :key="index"
                          :command="`${item}|${LineType[item as keyof typeof LineType]}`">
                          <span style="margin-right: 10px">{{ item }}</span>
                          <i :class="`t-icon ${LineTypeIcon[item as keyof typeof LineType]}`"></i>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-form-item>

                <el-form-item label="线条样式">
                  <el-select popper-class="editor-container-scss" ref="lineTypeSelect"
                    v-model="(store.currentPen as CustomPen).customLineDash" @change="handleChangePenLineType"
                    placeholder="线条样式">
                    <el-option v-for="strokeType in lineStrokeOptions" :key="strokeType.value" :label="strokeType.label"
                      :value="strokeType.value">
                      <img width="75" :src="strokeType.svg" alt="" />
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item v-for="meta in styleFormMeta" v-show="meta.condition === 'line' ? isLine : true"
                  :key="meta.key" :label="meta.label">
                  <el-input v-if="meta.type === 'input'" v-model="store.currentPen[meta.key] as any"
                    @input="handleChangePen(meta.key)" :placeholder="meta.label"></el-input>
                  <el-input-number v-if="meta.type === 'input-number'" controls-position="right"
                    v-model="store.currentPen[meta.key] as any" :max="meta.max" :min="meta.min" :step="meta.step"
                    :step-strictly="meta.stepStrictly" :placeholder="meta.label"
                    @input="handleChangePen(meta.key)"></el-input-number>
                  <el-select popper-class="editor-container-scss" v-if="meta.type === 'select'"
                    v-model="store.currentPen[meta.key]" @change="handleChangePen(meta.key)"
                    :placeholder="meta.placeholder">
                    <el-option v-for="item in meta.options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <el-color-picker show-alpha :predefine="ColorPredefine" v-if="meta.type === 'color-picker'"
                    v-model="store.currentPen[meta.key] as any" @change="handleChangePen(meta.key)"></el-color-picker>
                  <!--                  v-model:gradientColor="store.currentPen[meta.key] as any"-->
                  <t-color-picker v-if="meta.type === 'linear-color'" v-model="store.currentPen[meta.key] as any"
                    clearable :recentColors="null" :color-modes="['linear-gradient']" :enable-alpha="true"
                    @change="(value, context) => handleChangePen2(value, context, meta.key)"
                    @palette-bar-change="handleChangePen(meta.key)"
                    @recent-colors-change="handleChangePen1($event, meta.key, 'recent-colors-change')" />
                  <el-switch v-if="meta.type === 'switch'" v-model="store.currentPen[meta.key] as any"
                    @change="handleChangePen(meta.key)"></el-switch>
                </el-form-item>
              </div>
            </el-collapse-item>
            <el-collapse-item name="text" title="文字">
              <div class="collapse-content">
                <el-form-item v-for="meta in textFormMeta" :key="meta.key" :label="meta.label">
                  <el-input v-if="meta.type === 'input'" v-model="store.currentPen[meta.key] as any"
                    @input="handleChangePen(meta.key)" :placeholder="meta.placeholder"></el-input>
                  <el-input-number v-if="meta.type === 'input-number'" controls-position="right"
                    v-model="store.currentPen[meta.key] as any" :max="meta.max" :min="meta.min" :step="meta.step"
                    :step-strictly="meta.stepStrictly" :placeholder="meta.placeholder"
                    @input="handleChangePen(meta.key)"></el-input-number>
                  <el-color-picker show-alpha :predefine="ColorPredefine" v-if="meta.type === 'color-picker'"
                    v-model="store.currentPen[meta.key] as any" @change="handleChangePen(meta.key)"></el-color-picker>
                  <el-select popper-class="editor-container-scss" v-if="meta.type === 'select'"
                    v-model="store.currentPen[meta.key]" @change="handleChangePen(meta.key)" clearable
                    :placeholder="meta.label">
                    <el-option v-for="item in meta.options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <el-switch v-if="meta.type === 'switch'" v-model="store.currentPen[meta.key] as any"
                    @change="handleChangePen(meta.key)"></el-switch>
                </el-form-item>
              </div>
            </el-collapse-item>
            <!-- <el-collapse-item name="image" title="图片" v-if='store.currentPenLength == 1'>
              <div class="collapse-content">
              </div>
            </el-collapse-item>-->
            <el-collapse-item name="icon" title="字体图标" v-if='store.currentPenLength == 1'>
              <div class="collapse-content">
                <el-form-item label="字体图标" v-if="reloadIcon">
                  <i class="iconfont icon" @click="openDrawer">{{ store.currentPen.icon }}</i>
                  <el-icon :size="14" color="#000000d9" @click="delSvg" v-if="store.currentPen.icon">
                    <Delete />
                  </el-icon>
                  <el-icon :size="14" color="#000000d9" @click="openDrawer" v-else>
                    <Edit />
                  </el-icon>
                </el-form-item>
                <el-form-item label="图标大小">
                  <el-input-number controls-position="right" v-model="store.currentPen.iconSize" placeholder="自适应"
                    @input="handleChangePen('iconSize')"></el-input-number>
                </el-form-item>
                <el-form-item label="图标旋转">
                  <el-input-number controls-position="right" v-model="store.currentPen.iconRotate" placeholder=""
                    @input="handleChangePen('iconRotate')"></el-input-number>
                </el-form-item>
                <el-form-item label="颜色">
                  <el-color-picker show-alpha :predefine="ColorPredefine" v-model="store.currentPen.iconColor"
                    @change="handleChangePen('iconColor')"></el-color-picker>
                </el-form-item>
                <el-form-item label="对齐方式">
                  <el-select popper-class="editor-container-scss" v-model="store.currentPen.iconAlign"
                    @change="handleChangePen('iconAlign')" placeholder="">
                    <el-option v-for="item in iconAlignOptions" :key="item.value" :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-collapse-item>
            <el-collapse-item name="disable" title="禁用" v-if='store.currentPenLength == 1'>
              <div class="collapse-content">
                <el-form-item v-for="meta in disableFormMeta" :key="meta.key" :label="meta.label">
                  <el-switch v-model="store.currentPen[meta.key] as any"
                    @change="handleChangePen(meta.key)"></el-switch>
                </el-form-item>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="事件" name="event" v-if='store.currentPenLength == 1'>
        <editor-props-pen-events />
      </el-tab-pane>
      <el-tab-pane label="动效" name="animate" v-if='store.currentPenLength == 1'>
        <editor-props-pen-animate />
      </el-tab-pane>
      <el-tab-pane label="数据" name="data" v-if='store.currentPenLength == 1'>
        <editor-props-pen-data />
      </el-tab-pane>
      <el-tab-pane label="结构" name="structure" v-if='store.currentPenLength == 1'>
        <editor-props-tab-structure />
      </el-tab-pane>
    </el-tabs>
    <el-drawer v-model="drawer" title="选择字体图标" :show-close="false" :append-to-body="true" class="font-drawer">
      <div class="icons">
        <i :class="v" class="iconfont" v-for="(v, index) in sheetsIconList.className" :key="v"
          @click="addFont(index)"></i>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import EditorPropsTabStructure from '@/components/TopologyEditor/EditorProps/EditorPropsTabStructure.vue'
import EditorPropsPenEvents from '@/components/TopologyEditor/EditorProps/EditorPropsPenEvents.vue'
import EditorPropsPenData from '@/components/TopologyEditor/EditorProps/EditorPropsPenData.vue'
import EditorPropsPenAnimate from '@/components/TopologyEditor/EditorProps/EditorPropsPenAnimate.vue'
import type { Pen, Rect } from '@meta2d/core'
import { LineEndsType, LineType, LineTypeIcon, PenType, StrokeType } from '@/components/TopologyEditor/constant'
import EditorButton from '@/components/TopologyEditor/EditorHeader/EditorButton.vue'
import type { FormMetaItem } from 'types/editor'
import type { Option } from 'element-plus/es/components/select-v2/src/select.types'
import { useTopologyEditorStore } from '@/store/modules/topology-editor'
import initIconfont from '@/utils/getStyleSheets'
import { ColorPredefine } from '../constant'
import { Delete, Edit } from "@element-plus/icons-vue";
const store = useTopologyEditorStore()

const lineSolid = new URL('../assets/svg/line-solid.svg', import.meta.url).href
const lineDashedSmall = new URL('../assets/svg/line-dashed-small.svg', import.meta.url).href
const lineDashedLarge = new URL('../assets/svg/line-dashed-large.svg', import.meta.url).href
const lineDashedDot = new URL('../assets/svg/line-dashed-dot.svg', import.meta.url).href

// eslint-disable-next-line @typescript-eslint/no-explicit-any
declare const window: any

// eslint-disable-next-line @typescript-eslint/no-unused-vars
declare interface CustomPen extends Pen {
  lineType: string
  customLineDash: string
  radio: boolean
}

defineOptions({
  name: 'EditorPropsPen'
})

//页面需要绑定数据
const penDatas = reactive({
  lineDashSvg: ''
})

const reloadIcon = ref(true)
const activeName = ref('props')
const activeCollapse = reactive(['position&size', 'style', 'text', 'line-position', 'icon'])
const xyhwFormMeta = reactive<FormMetaItem[]>([
  { type: 'input-number', label: '坐标X', key: 'x' },
  { type: 'input-number', label: '坐标Y', key: 'y' },
  { type: 'input-number', label: '宽度', key: 'width' },
  { type: 'input-number', label: '高度', key: 'height' }
])
const recentColors = ref([])
const disableFormMeta = reactive([
  { type: 'switch', label: '禁用锚点', key: 'disableAnchor' },
  { type: 'switch', label: '禁用输入', key: 'disableInput' },
  { type: 'switch', label: '禁用旋转', key: 'disableRotate' },
  { type: 'switch', label: '禁用缩放', key: 'disableSize' }
])

const positionFormMeta = reactive<FormMetaItem[]>([
  { type: 'switch', label: '锁定宽高比', key: 'ratio' },
  { type: 'switch', label: '原始长宽比', key: 'imageRatio' },
  { type: 'input-number', label: '圆角', key: 'borderRadius', max: 1, min: 0, step: 0.1 },
  { type: 'input-number', label: '旋转', key: 'rotate', max: 360, min: 0, step: 1 },
  { type: 'input-number', label: '内边距-左', key: 'paddingLeft', max: 1, min: 0, step: 0.1 },
  { type: 'input-number', label: '内边距-右', key: 'paddingRight', max: 1, min: 0, step: 0.1 },
  { type: 'input-number', label: '内边距-上', key: 'paddingTop', max: 1, min: 0, step: 0.1 },
  { type: 'input-number', label: '内边距-下', key: 'paddingBottom', max: 1, min: 0, step: 0.1 },
  { type: 'input-number', label: '进度', key: 'progress', max: 1, min: 0, step: 0.1 },
  { type: 'color-picker', label: '进度颜色', key: 'progressColor' },
  { type: 'switch', label: '垂直进度', key: 'verticalProgress' },
  { type: 'switch', label: '水平翻转', key: 'flipX' },
  { type: 'switch', label: '垂直翻转', key: 'flipY' }
  // { type: 'switch', label: '输入框', key: 'input' }
])

const styleFormMeta = reactive<FormMetaItem[]>([
  {
    type: 'select',
    label: '线末端样式',
    key: 'lineCap',
    placeholder: '线末端样式',
    options: [
      { value: 'round', label: '默认' },
      { value: 'butt', label: '平直' },
      {
        value: 'square',
        label: '正方形'
      }
    ]
  },
  {
    type: 'select',
    label: '线转折点样式',
    key: 'lineJoin',
    placeholder: '线转折点样式',
    options: [
      { value: 'round', label: '默认' },
      { value: 'bevel', label: '斜角' },
      {
        value: 'miter',
        label: '尖角'
      }
    ]
  },
  { type: 'select', label: '线条渐变', placeholder: '是否线条渐变', key: 'strokeType', options: StrokeType },
  { type: 'linear-color', label: '线条渐变色', key: 'lineGradientColors' },
  { type: 'input-number', label: '平滑度', key: 'gradientSmooth', min: 0, max: 3, step: 0.1 },
  { type: 'color-picker', label: '颜色', key: 'color' },
  { type: 'color-picker', label: '浮动颜色', key: 'hoverColor' },
  { type: 'color-picker', label: '选中颜色', key: 'activeColor' },
  { type: 'input-number', label: '线条宽度', key: 'lineWidth', min: 0 },
  { type: 'color-picker', label: '边框颜色', key: 'borderColor' },
  { type: 'input-number', label: '边框宽度', key: 'borderWidth', min: 0, max: 50, step: 1 },
  { type: 'color-picker', label: '背景颜色', key: 'background' },
  { type: 'color-picker', label: '浮动背景颜色', key: 'hoverBackground' },
  { type: 'color-picker', label: '选中背景颜色', key: 'activeBackground' },
  {
    type: 'input-number',
    label: '透明度',
    key: 'globalAlpha',
    min: 0,
    max: 1,
    step: 0.1,
    stepStrictly: true,
    placeholder: '0 - 1'
  },
  { type: 'color-picker', label: '锚点颜色', key: 'anchorColor' },
  { type: 'input-number', label: '锚点半径', key: 'anchorRadius' },
  { type: 'color-picker', label: '阴影颜色', key: 'shadowColor' },
  { type: 'input-number', label: '阴影模糊度', key: 'shadowBlur', min: 0 },
  { type: 'input-number', label: '阴影X偏移', key: 'shadowOffsetX' },
  { type: 'input-number', label: '阴影Y偏移', key: 'shadowOffsetY' }
])

const textFormMeta = reactive<FormMetaItem[]>([
  { type: 'input', label: '字体名', key: 'fontFamily' },
  { type: 'input-number', label: '字体大小', key: 'fontSize', min: 0, max: 100, step: 1 },
  { type: 'color-picker', label: '文字颜色', key: 'textColor' },
  { type: 'color-picker', label: '浮动文字颜色', key: 'hoverTextColor' },
  { type: 'color-picker', label: '选中文字颜色', key: 'activeTextColor' },
  { type: 'color-picker', label: '文字背景', key: 'textBackground' },
  {
    type: 'select',
    label: '倾斜',
    key: 'fontStyle',
    options: [
      { value: 'normal', label: '正常' },
      { value: 'italic', label: '倾斜' }
    ]
  },
  {
    type: 'select',
    label: '加粗',
    key: 'fontWeight',
    options: [
      { value: '300', label: '正常' },
      { value: '700', label: '加粗' }
    ]
  },
  {
    type: 'select',
    label: '水平对齐',
    key: 'textAlign',
    options: [
      { value: 'left', label: '左对齐' },
      { value: 'center', label: '水平居中' },
      {
        value: 'right',
        label: '右对齐'
      }
    ]
  },
  {
    type: 'select',
    label: '垂直对齐',
    key: 'textBaseline',
    options: [
      { value: 'top', label: '上对齐' },
      { value: 'middle', label: '垂直居中' },
      {
        value: 'bottom',
        label: '下对齐'
      }
    ]
  },
  { type: 'input-number', label: '行高', key: 'lineHeight', min: 0 },
  {
    type: 'select',
    label: '换行',
    key: 'whiteSpace',
    options: [
      { value: 'nowrap', label: '不换行' },
      {
        value: 'pre-line',
        label: '换行符换行'
      },
      { value: 'break-all', label: '永远换行' }
    ]
  },
  { type: 'input-number', label: '文字宽度', key: 'textWidth', min: 0 },
  { type: 'input-number', label: '文字高度', key: 'textHeight', min: 0 },
  { type: 'input-number', label: '水平偏移', key: 'textLeft' },
  { type: 'input-number', label: '垂直偏移', key: 'textTop' },
  {
    type: 'select',
    label: '超出省略',
    key: 'ellipsis',
    options: [
      { value: true, label: '是' },
      { value: false, label: '否' }
    ],
    placeholder: '是'
  },
  { type: 'switch', label: '隐藏文字', key: 'hiddenText' },
  { type: 'input-number', label: '保留小数位数', key: 'keepDecimal', min: 0, step: 1, stepStrictly: true },
  { type: 'switch', label: '删除线', key: 'textStrickout' },
  { type: 'color-picker', label: '删除线颜色', key: 'textStrickoutColor' },
  { type: 'input', label: '文本', key: 'text' }
])

const lineStrokeOptions: Option[] = [
  { value: '5, 0', label: '——————', svg: lineSolid },
  { value: '5, 5', label: '- - - - - - - - - -', svg: lineDashedSmall },
  { value: '10, 10', label: '一 一 一 一 一', svg: lineDashedLarge },
  { value: '10, 10, 2, 10', label: '─ - ─ - ─ - ─ -', svg: lineDashedDot }
]

const iconAlignOptions: Option[] = [
  { value: 'center', label: '居中' },
  { value: 'top', label: '上' },
  { value: 'bottom', label: '下' },
  { value: 'left', label: '左' },
  { value: 'right', label: '右' },
  { value: 'left-top', label: '左上' },
  { value: 'right-top', label: '右上' },
  { value: 'left-bottom', label: '左下' },
  { value: 'right-bottom', label: '右下' }
]

const lineTypeName = ref('曲线')
const currentLineFrom = ref('')
const currentLineTo = ref('')

const isLine = computed(() => {
  return store.currentPen.type === PenType.Line
})
const isImage = computed(() => {
  return store.currentPen.image !== undefined
})
const isVideo = computed(() => {
  return store.currentPen.video !== undefined
})
const isIfram = computed(() => {
  return store.currentPen.iframe !== undefined
})

const drawer = ref(false)
const sheetsIconList = ref({})

function openDrawer() {
  initGetStyleSheets()
  nextTick(() => {
    drawer.value = true
  })
}

function initGetStyleSheets() {
  initIconfont.ali().then((res: any) => {
    sheetsIconList.value = res
  })
}
function handleChangePen1(e, propKey: keyof Pen, str) {
  console.log(e, propKey, str)
  recentColors.value = e
  handleChangePen(propKey)
}
function handleChangePen2(e, context, propKey: keyof Pen) {
  console.log(e, context)
  handleChangePen(propKey)
}
//图片改变事件
function handleChangePen(propKey: keyof Pen) {
  const propValue = store.currentPen[propKey]
  if (store.currentPenLength > 1) {
    store.currentPens.forEach((pen, index) => {
      window.meta2d &&
        window.meta2d.canvas &&
        window.meta2d.setValue(
          {
            id: pen.id,
            [propKey]: propValue
          },
          { history: true }
        )
    })
  } else {
    window.meta2d &&
      window.meta2d.canvas &&
      window.meta2d.setValue(
        {
          id: store.currentPen.id,
          [propKey]: propValue
        },
        { history: true }
      )
  }

  window.meta2d && window.meta2d.canvas && window.meta2d.render()
}

function handleChangePenRect() {
  console.log('set penRect', store.currentPenRect)
  const pen = window.meta2d.findOne(store.currentPen.id)
  window.meta2d && window.meta2d.setPenRect(pen, store.currentPenRect)
}

const lineTypeSelect = ref<ComponentPublicInstance | null>(null)

function handleChangePenLineType(val: string) {
  console.log('set pen lineType', val)
  const strokeType = lineStrokeOptions.find((option) => {
    return option.value === val
  })
  penDatas.lineDashSvg = strokeType?.svg
  lineTypeSelect.value?.$el.children[0].children[0].setAttribute(
    'style',
    `background: url(${strokeType?.svg}) no-repeat;
            background-size: 80%;
            background-position: center;
          `
  )
  if (store.currentPenLength > 1) {
    store.currentPens.forEach((pen, index) => {
      window.meta2d && window.meta2d.setValue({ id: pen.id, lineDash: val.split(',') }, { history: true })
    })
  } else {
    window.meta2d && window.meta2d.setValue({ id: store.currentPen.id, lineDash: val.split(',') }, { history: true })
  }
}

/**
 * 修改线段类型
 * @param command
 */
function onChangeLineType(command: string) {
  const [typeName, lineType] = command.split('|')
  lineTypeName.value = typeName
  const activeItem = window.meta2d.canvas.store.active
  console.log(activeItem);

  window.meta2d && window.meta2d.updateLineType(activeItem[0], lineType)
}

/**
 * 修改线段开始形状
 */
function onChangeLineStart(command: string) {
  currentLineFrom.value = command
  window.meta2d && window.meta2d.setValue({ id: store.currentPen.id, fromArrow: command }, { history: true })
}

/**
 * 修改线段结束形状
 */
function onChangeLineEnd(command: string) {
  currentLineTo.value = command
  window.meta2d && window.meta2d.setValue({ id: store.currentPen.id, toArrow: command }, { history: true })
}

function addFont(index: number) {
  reloadIcon.value = false
  window.meta2d &&
    window.meta2d.canvas &&
    window.meta2d.setValue(
      {
        id: store.currentPen.id,
        iconFamily: 'iconfont',
        icon: sheetsIconList.value.unicodeName[index]
      },
      { history: true }
    )
  window.meta2d && window.meta2d.canvas && window.meta2d.render()
  nextTick(() => {
    drawer.value = false
    reloadIcon.value = true
  })
}

function delSvg() {
  reloadIcon.value = false
  window.meta2d &&
    window.meta2d.canvas &&
    window.meta2d.setValue(
      {
        id: store.currentPen.id,
        iconFamily: undefined,
        icon: undefined,
        iconRotate: undefined,
        iconSize: undefined,
        iconColor: undefined,
        iconAlign: undefined
      },
      { history: true }
    )
  window.meta2d && window.meta2d.canvas && window.meta2d.render()
  nextTick(() => {
    reloadIcon.value = true
  })
}
</script>
<style lang="scss">
.font-drawer {
  width: 256px !important;

  .el-drawer__header {
    margin-bottom: 0;
    color: #000000d9;
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 24px;
  }

  .el-drawer__body {
    padding: 0;
    overflow-x: hidden;

    .icons {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 16px;
      background-color: #fff;
      border: 1px solid #e5e5e5;
      padding: 4px 8px;
      margin-right: 4px;

      .iconfont {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        cursor: pointer;
        color: #000000d9;

        &:hover {
          color: #409eff;
        }
      }
    }
  }
}

.icon {
  color: #000000d9;
  margin-right: 8px;
  font-size: 14px !important;
}
</style>
